<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <div class="login-left">
        <img src="../../assets/images/login.png" alt="" />
      </div>

      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="../../assets/images/logo.png" alt="" />
          <p class="logo-text">欢迎登录</p>
        </div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名"> </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" show-password v-model="loginForm.password" placeholder="请输入密码"> </el-input>
          </el-form-item>
          <div class="flx-row">
            <el-checkbox style="flex: 1" v-model="checked" label="记住我" size="large" />
          </div>
        </el-form>

        <div class="login-btn">
          <el-button icon="el-icon-circle-close" @click="resetForm('loginFormRef')" size="large">重置</el-button>
          <el-button class="btn-login" icon="el-icon-user-solid" @click="login('loginFormRef')" size="large" type="primary"> 登录 </el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="login-container flx-center">
    <div class="login-box">
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="../../assets/images/logo.png" alt="" />
          <p class="logo-text">欢迎登录</p>
        </div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名"> </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" show-password v-model="loginForm.password" placeholder="请输入密码"> </el-input>
          </el-form-item>
          <div class="flx-row">
            <el-checkbox style="flex: 1" v-model="checked" label="记住我" size="large" />
          </div>
        </el-form>

        <div class="login-btn">
          <el-button icon="el-icon-circle-close" @click="resetForm('loginFormRef')" size="large">重置</el-button>
          <el-button class="btn-login" icon="el-icon-user-solid" @click="login('loginFormRef')" size="large" type="primary"> 登录 </el-button>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
import { getMenu } from '../../api/api.js'
import { Base64 } from 'js-base64'

export default {
  name: 'login',
  data() {
    return {
      checked: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            message: '用户名长度不能小于3位',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    const username = localStorage.getItem('userId')
    if (username) {
      this.loginForm.username = localStorage.getItem('userId')
      //base64解密
      this.loginForm.password = Base64.decode(localStorage.getItem('password'))
      this.checked = true
    }
  },
  methods: {
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 登录 */

    login(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        else {
          /* 账号密码加密存储 */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password)
            localStorage.setItem('userId', this.loginForm.username)
            localStorage.setItem('password', password)
          } else {
            localStorage.removeItem('userId')
            localStorage.removeItem('password')
          }
          /* 登录成功后存储 token 和菜单栏信息 */
          const { data: res } = await getMenu(this.loginForm)
          if (res.code !== 200) {
            this.$message({
              message: '登录失败！',
              type: 'error'
            })
          } else {
            this.$message({
              message: '登录成功！',
              type: 'success'
            })
            this.$store.commit('clearMenu')
            //设置token
            sessionStorage.setItem('token', res.data.token)
            this.$store.commit('setToken', res.data.token)

            //获取菜单栏存储到state中
            this.$store.commit('setMenu', res.data.menu)
            //动态添加路由
            this.$store.commit('addMenu', this.$router)
            //设置用户信息(角色名和头像信息)
            sessionStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
            this.$store.commit('setUserInfo', res.data.userInfo)
            this.$router.push({ name: 'home' })
          }
        }
      })
    }
  },
  created() {
    window.onload = function () {
      alert('超级管理员账号密码：admin\n普通用户账号密码：user')
    }
  }
}
</script>

<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #4060c7;
  border-color: #4060c7;
}
</style>

<style lang="less">
.login-container {
  width: 100vw;
  height: 100vh;
  // background-color: #6c88d5;
  background-image: url('../../assets/images/bg.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-box {
    width: 96%;
    height: 94%;
    background-color: hsla(0, 0%, 100%, 0.85);
    border-radius: 10px;
    padding: 0 11% 0 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .login-left {
      width: 800px;
      color: #6e736fff;

      .title {
        font-size: 48px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(47, 57, 78, 1);
        text-align: left;
      }

      img {
        width: 735px;
        height: 465px;
      }
    }

    .login-form {
      width: 470px;
      height: 500px;
      margin-bottom: 20px;
      padding: 10px 40px 35px 30px;
      border-radius: 10px;
      -webkit-box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
      box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);

      .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 48px;
        margin-bottom: 40px;

        .login-icon {
          width: 60px;
        }

        .logo-text {
          font-weight: bold;
          font-size: 32px;
          padding-left: 25px;
          white-space: nowrap;
          color: #2d51e6;
        }
      }

      .el-form-item {
        margin-bottom: 35px;
      }

      .flx-row {
        span {
          font-size: 15px;
          color: #2d51e6;
        }

        .img {
          flex: 1;
          text-align: center;
        }
      }

      .login-btn {
        margin-top: 40px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        white-space: nowrap;

        .el-button {
          width: 185px;
        }
      }
      .btn-login {
        background-color: #4060c7;
      }
    }
  }
}
</style>

<style lang="">
/* .login-form {
      width: 400px;
      height: 460px;
      padding: 10px 40px 35px 40px;
      border-radius: 10px;
      -webkit-box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
      box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);

       .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 25px;

        .login-icon {
          width: 60px;
        }

        .logo-text {
          font-weight: bold;
          font-size: 32px;
          padding-left: 25px;
          white-space: nowrap;
          color: #2d51e6;
        }
      }

      .el-form-item {
        margin-bottom: 30px;
      }

      .flx-row {
        span {
          font-size: 14px;
          color: #2d51e6;
        }

        .img {
          flex: 1;
          text-align: center;
        }
      }

      .login-btn {
        margin-top: 40px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        white-space: nowrap;

        .el-button {
          width: 185px;
        }
      }
      .btn-login {
        width: 185px;
        background-color: #4060c7;
      }
    } */
</style>
